<template>
	<view class="app"> 
		<view class="withdraw-header">
			<text class="withdraw-header-text">充值记录</text>
			<view class="create-time-choose">
				<text class="create-time-choose-text" @click="dateShowFunc">日期选择</text>	
				<u-calendar v-model="dateShow" :mode="dateMode" @change="chooseDate" btn-type="success" range-bg-color="#36BE6A" active-bg-color="#36BE6A"></u-calendar>
			</view>
		</view>
		<view class="order-list">
			<view class="order-card box-card withdraw-item" v-for="(item,index) in list" :key="index">
				<view class="withdraw-item-icon">
					<image src="../../static/images/rechargeicon.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="withdraw-item-info-sid">
					<text class="sid-text">充值成功</text>
					<text class="item-info-text">余额: {{item.billBalance}}</text>
				</view>
				<view class="withdraw-item-info-money">
					<text class="money-text">+{{item.billMoney}}</text>
					<text class="item-info-text">{{item.createTime}}</text>
				</view>
			</view>
			
			<u-loadmore :status="loadMoreStatus" @loadmore="loadList"/>
			<c-safe-bottom ></c-safe-bottom>
			<view style="height: 100rpx;"></view>
		</view>
	</view>
</template>
<style scoped>  
	// #ifdef H5
	.safe-bottom{ height: 0rpx;}
	// #endif 
	.order-list{padding-top: 10rpx;}
	.box-card{padding: 20rpx 42rpx;}
	.withdraw-header{display: flex;justify-content: space-between;padding:0 40rpx;}
	.withdraw-header-text{font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 36rpx;color: #333333;line-height: 102rpx;text-align: left;font-style: normal;text-transform: none;}
	.create-time-choose{display: flex;align-items: center;}
	.create-time-choose-text{display: block;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 24rpx;color: #9FA3A4;line-height: 62rpx;text-align: left;font-style: normal;text-transform: none;background: url('@/static/images/datechoose.png') no-repeat center center;background-size: 100% 100%;width: 166rpx;height: 62rpx;padding-left: 18rpx;}
	.withdraw-item{display: flex;padding-left: 0;}
	.withdraw-item-icon{width: 76rpx;height: 76rpx;margin: 22rpx;}
	.withdraw-item-info-sid{flex: 1 1 0%;display: flex;flex-wrap: wrap;justify-content: flex-start;}
	.withdraw-item-info-money{flex: 1;text-align: right;    display: flex;justify-content: flex-end;flex-wrap: wrap;}
	.item-info-text{display: flex;align-items: center;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 24rpx;color: #999999;text-align: left;font-style: normal;text-transform: none;}
	.sid-text{display: flex;align-items: center;font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 28rpx;color: #333333;text-align: left;font-style: normal;text-transform: none;width: 100%;}
	.money-text{display: flex;align-items: center;font-family: Alte DIN 1451 Mittelschrift, Alte DIN 1451 Mittelschrift;font-weight: 400;font-size: 36rpx;color: #36BE6A;letter-spacing: 1px;text-align: left;font-style: normal;text-transform: none;}
</style>
<script>  
	export default {
		data() {
			return {
				loadMoreStatus: "loadmore",
				list: [],
				Params:{
					pageSize:10,
					curPage:1,
					createTime:''
				},
				dateShow: false,
				dateMode: 'date'
			}
		}, 
		computed:{
			
		},
		methods:{
			loadList(){
				this.loadMoreStatus = 'loading'; 
				this.$u.api.user.getRechargeList(this.Params).then(res => {
					this.loadMoreStatus = 'loadmore'; 
					if(res.status != 200){
						return false
					}
					if(res.data.list == undefined || res.data.list.length <= 0){
						this.loadMoreStatus = 'nomore'; 
						return false
					} 
					
					this.list = [...this.list,...res.data.list]
					this.Params.curPage++
				}).catch(err => {
					console.log(err)
					this.loadMoreStatus = 'loadmore'; 
				})
			},
			chooseDate(obj){
				this.Params.createTime = obj.result
				this.Params.curPage = 1
				this.list = []
				this.loadList()
			},
			dateShowFunc(){
				this.dateShow=true
			}
		},
		onLoad(option){
			this.loadList()
		}, 
		onReady() { 

		},
		onUnload() { 
			
		}
		
	}
</script>